<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="年龄">
        <el-input v-model="formInline.age" placeholder="年龄"></el-input>
      </el-form-item>-
      <el-form-item label="">
        <el-input v-model="formInline.agetwo" placeholder="年龄"></el-input>
      </el-form-item>
      <el-form-item label="金额">
        <el-input v-model="formInline.pay" placeholder="金额"></el-input>
      </el-form-item>-
      <el-form-item label="">
        <el-input v-model="formInline.paytwo" placeholder="金额"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" required>
        <el-col :span="18">
          <el-form-item >
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.startTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>

      </el-form-item>
      <el-form-item label="结束时间" required>
        <el-col :span="18">
          <el-form-item >
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list()">查询</el-button>
      </el-form-item>
    </el-form>


    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column

          prop="name"
          label="名字"
          width="150">
      </el-table-column>
      <el-table-column
          prop="jobNum"
          label="工号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="section"
          label="部门"
          width="120">
      </el-table-column>
      <el-table-column
          prop="job"
          label="职务"
          width="120">
      </el-table-column>
      <el-table-column
          prop="startTime"
          label="入职时间"
          width="300">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="120">
      </el-table-column>
      <el-table-column
          prop="pay"
          label="底薪"
          width="120">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="联系方式"
          width="120">
      </el-table-column>
      <el-table-column
          prop="fname"
          label="文件名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="fpath"
          label="文件路径"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="updateopen(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="addopen(scope.row)" type="text" size="small">添加</el-button>
          <el-button @click="create(scope.row)" type="text" size="small">生成pdf</el-button>
          <el-button @click="preview(scope.row)" type="text" size="small">预览</el-button>
          <el-button @click="download(scope.row)" type="text" size="small">下载</el-button>

        </template>
      </el-table-column>




    </el-table>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工号" :label-width="formLabelWidth" prop="jobNum">
          <el-input v-model="form.jobNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth"  prop="jobNum">
          <el-input v-model="form.section" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职务" :label-width="formLabelWidth"  prop="jobNum">
          <el-input v-model="form.job" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="底薪" :label-width="formLabelWidth"  prop="jobNum">
          <el-input v-model="form.pay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth"  prop="jobNum">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth"  prop="address">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth"  prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="开始时间"  prop="startTime">
          <el-col :span="11">
            <el-form-item >
              <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>

        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination

        @current-change="handleCurrentChange"
        :page-size="3"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ListView",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },

        ],
        jobNum: [
          { required: true, message: '请输入工号', trigger: 'blur' },

        ],
        section: [
          { required: true, message: '请输入部门', trigger: 'blur' },

        ],
        job: [
          { required: true, message: '请输入活动职务', trigger: 'blur' },

        ],
        startTime: [
          { required: true, message: '请输入入职时间', trigger: 'blur' },

        ],
        pay: [
          { required: true, message: '请输入底薪', trigger: 'blur' },

        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },

        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },

        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },

        ],

      },
      dialogFormVisible:false,
      form:{},
      formInline:{},
      tableData:[],
      total:0,
      pageNum:0,
      formLabelWidth:"120px"

    }
  }, methods: {
    preview(){
      location="http://127.0.0.1:8005/preview";
    },
    download(){
      location="http://127.0.0.1:8005/download";
    },
    create(){
      location="http://127.0.0.1:8005/create";
    },
    add(formName){
      this.axios.post("add",this.form).then(res=>{
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (res.data.code==200){
              this.$message.success(res.data.msg);
              this.dialogFormVisible=false;
              this.list();
            }else{
              this.$message.success(res.data.msg);
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      })
    },
    handleCurrentChange(page){
      this.pageNum=page;
      this.list();
    },
    list(){
      this.axios.post("list?pageNum="+this.pageNum,this.formInline).then(res=>{
        if (res.data.code==200){
            this.tableData=res.data.data.list;
            this.total=res.data.data.total;
        }
      })
    },
    addopen(){
        this.dialogFormVisible=true;
        this.form={};
    },
    updateopen(row){
      this.dialogFormVisible=true;
      this.form=row;
    }
  }, created() {
    this.list();
  }
}
</script>

<style scoped>

</style>